import React from 'react'
import { ListItem, ListInfo, LoadMore } from '../style'
import { connect } from 'react-redux'
import { actionCreator } from '../store/index'
import { Link } from 'react-router-dom'
class List extends React.PureComponent {
  render() {
    const { list, loadMore, page } = this.props
    return (
      <div>
        {
          list.map((item) => (
            <Link to={'/detail/'+item.get('id')} key={item.get('id')}>
              <ListItem>
                <img
                  className="pic"
                  src={item.get('imgUrl')}
                  alt=""
                />
                <ListInfo>
                  <h3 className="title">{item.get('title')}</h3>
                  <p className="desc">{item.get('desc')}</p>
                </ListInfo>
              </ListItem>
            </Link>
          ))
        }
        <LoadMore onClick={() => { loadMore(page)}}>阅读更多</LoadMore>
      </div>
    )
  }
}

const mapStateToStore = (state) => ({
  list: state.getIn(['home', 'articleList']),
  page: state.getIn(['home', 'page'])
})
const mapDispatch = (dispatch) => ({
  loadMore (page) {
    const action = actionCreator.getHomeData({ page })
    dispatch(action)
  }
})

export default connect(mapStateToStore, mapDispatch)(List)